<template>
  <!-- 我的资产 -->
  <div class="myProperty-view youke">
    <Navs left></Navs>
    <Main pb>
        <div class="center">
          <span class="title">扫码转入</span>
          <div class="img-box">
            <qrcode-vue :size="72" :value="qrcode" class="qrcode-vue"></qrcode-vue>
          </div>
          <div style="color:#b5ceff;margin-top:2.4rem;">获取手机号</div>
          <div style="margin-top:1.25rem;color:white;">{{qrcode}}</div>
          <van-button
            type="info"
            @click="linkFun"
            style="background:#6b9dfe;color:white;border:none;margin-top:1.56rem;width:100px;"
          >复制手机号</van-button>
          <div class="footer">
            <i></i>
            <van-button
              type="info"
              style="background:#6b9dfe;color:white;border:none;margin:1.56rem 0;width:100px;"
              to="/property/rollOut"
            >转出</van-button>
          </div>
        </div>
    </Main>
    <!-- <Tabbar></Tabbar> -->
  </div>
</template>

<script type="text/ecmascript-6">
import { user } from "@/api";
import qrcodeVue from "qrcode-vue";
export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      qrcode: ""
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {
    qrcodeVue
  },
  //执行方法
  methods: {
    linkFun() {
      this.$copy(this.qrcode).then(res => {
        this.$toast("复制成功");
      });
    },
    getlist() {
      user.qbdz().then(res => {
        if (res.code == 1000) {
          this.qrcode = res.result;
        }
      });
    }
  },
  mounted() {
    this.getlist();
  }
  //路由退出时候调用
};
</script>

<style scoped lang="less">
.center {
  background: #4684fe;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #5b91fb;
  text-align: center;
  height: calc(100vh);
  margin:15px 15px;
  .img-box {
    border: 1px solid #ffffff;
    background-color: #ffffff;
    height: 9rem;
    width: 9rem;
    margin: 0 auto;
    /*margin-top: 3rem;*/
    img {
      width: 8rem;
      height: 8rem;
      margin-top: 0.5rem;
      margin-left: 0.5rem;
    }
  }

  .title {
    display: inline-block;
    color: white;
    font-size: 16px;
    margin: 60/32rem 0;
  }

  img {
    display: block;
    width: 360/32rem;
    height: 360/32rem;
    margin: 0 auto;
  }

  .footer {
    margin-top: 3rem;
  }
  i {
    width: 90%;
    display: block;
    height: 1px;
    background: #6b9dfe;
    margin: 0 auto;
    margin-top: 1.56rem;
  }
}
</style>
<style lang="less">
.qrcode-vue {
  img {
    width: 100% !important;
  }
}
</style>
